<template>
  <div class="plugin-setting">
    <div class="settings-header">
      <div class="icon" @click="toPopup">
        <div v-if="hoverTitle">
          <img src="@/assets/icons/back-active.svg" alt="" />
        </div>
        <div v-else><img src="@/assets/icons/back.svg" alt="" /></div>
      </div>
      <div class="title">偏好设置</div>
    </div>
    <div id="format-feature">
      <div class="label">截图格式</div>
      <div class="options">
        <div class="option" @click="clickItem('png')">
          <div
            :class="[useCurrentFormat == 'png' ? 'active-png' : 'mormal-png']"
            class="icon"
          ></div>
          <div
            class="name"
            :style="{
              color: useCurrentFormat == 'png' ? '#00A289' : '#A1A6C4'
            }"
          >
            PNG
          </div>
        </div>
        <div class="option" @click="clickItem('jpeg')">
          <div
            :class="[
              useCurrentFormat == 'jpeg' ? 'active-jpeg' : 'mormal-jpeg'
            ]"
            class="icon"
          ></div>
          <div
            class="name"
            :style="{
              color: useCurrentFormat == 'jpeg' ? '#00A289' : '#A1A6C4'
            }"
          >
            JPEG
          </div>
        </div>
      </div>
    </div>
    <div id="shortcuts-feature">
      <div class="label">快捷键设置</div>
      <div class="shortcuts-table">
        <div class="shortcut" v-for="item in keyDownData" :key="item.id">
          <div class="name batch">{{ item.name }}</div>
          <div class="input">
            <input
              @keydown="keyFunction(item, $event)"
              readonly="“readonly”"
              :id="item.id"
              v-model="item.value"
              class="shortcut-input"
              type="text"
              placeholder="输入快捷键"
            />
          </div>
        </div>
      </div>
    </div>
    <PopupFooter></PopupFooter>
  </div>
</template>

<script>
import {
  getShortCutKeys,
  setShortCutKeySetting,
  getDefaultImageFormatStyle,
  setDefaultImageFormatStyle
} from "@/logics/shortcutkey";
// 组件
import PopupFooter from "../Popup/components/PopupFooter.vue";
export default {
  name: "PluginSetting",
  data() {
    return {
      hoverTitle: false,
      useCurrentFormat: "",
      keyDownData: [],
      tempKeyDownData: []
    };
  },
  components: {
    PopupFooter
  },
  computed: {
    isMac() {
      return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
    }
  },
  methods: {
    toPopup() {
      this.$EventBus.$emit("changeCompant", "Popup");
    },
    clickItem(format) {
      this.useCurrentFormat = format;
      setDefaultImageFormatStyle(format)
    },
    async initData() {
      // 初始化 mac 和win
      this.keyDownData = await getShortCutKeys();
      this.tempKeyDownData = JSON.parse(JSON.stringify(this.keyDownData))
      this.useCurrentFormat = await getDefaultImageFormatStyle()
      this.$forceUpdate()

    },
    async keyFunction(item, e) {
      e.preventDefault();
      let currentValues = item.value;
      let keyCode = e.keyCode;
      let char = String.fromCharCode(keyCode);
      let shiftKey = e.shiftKey;
      let metaKey = e.metaKey;
      let ctrlKey = e.ctrlKey;
      let altKey = e.altKey;
      let needCombindKey = false;
      let result = "";

      if (ctrlKey) {
        if (!this.isMac) {
          result += "Ctrl + ";
        } else {
          result += "Ctrl + ";
        }
        needCombindKey = true;
      }
      if (metaKey && this.isMac) {
        result += "Command + ";
        needCombindKey = true;
      }
      if (shiftKey) {
        result += "Shift + ";
        needCombindKey = true;
      }
      if (altKey) {
        if (this.isMac) {
          result += "Alt + ";
        } else {
          result += "Alt + ";
        }
        needCombindKey = true;
      }
      switch (keyCode) {
        case 8:
          // 清空快捷键
          if (result.length == 0) {
            result = "";
            $(this).val(result).trigger("change");
            return;
          }
          break;
        // F1 - F12
        case 112:
          result += "F1";
          needCombindKey = false;
          break;
        case 113:
          result += "F2";
          needCombindKey = false;
          break;
        case 114:
          result += "F3";
          needCombindKey = false;
          break;
        case 115:
          result += "F4";
          needCombindKey = false;
          break;
        case 117:
          result += "F6";
          needCombindKey = false;
          break;
        case 118:
          result += "F7";
          needCombindKey = false;
          break;
        case 119:
          result += "F8";
          needCombindKey = false;
          break;
        case 120:
          result += "F9";
          needCombindKey = false;
          break;
        case 121:
          result += "F10";
          needCombindKey = false;
          break;
        case 122:
          result += "F11";
          needCombindKey = false;
          break;
        case 123:
          result += "F12";
          needCombindKey = false;
          break;
        default:
          // 英文数字按键必须要有搭配按键才算数
          if (needCombindKey) {
            if (ctrlKey || metaKey || altKey || shiftKey) {
              if (keyCode === 187) {
                result += "=";
                needCombindKey = false;
              }
              if (keyCode === 107) {
                result += "Plus";
                needCombindKey = false;
              } else if (keyCode === 189 || keyCode === 109) {
                result += "-";
                needCombindKey = false;
              } else if (!/[^A-Za-z0-9-=+_.]/.test(char.toUpperCase())) {
                result += char.toUpperCase();
                needCombindKey = false;
              }
            }
          }
      }
      if (result && !needCombindKey) {
        if (currentValues && currentValues.indexOf(result) !== -1) return;
        item.value = result;
        console.log("设置item的值", item)
        let res = await setShortCutKeySetting(item);
        if(res == -1){
          this.$message.info({
            message:"存在重复快捷键",
            customClass: 'el-message-index'
          })
          this.keyDownData = JSON.parse(JSON.stringify(this.tempKeyDownData))
          this.$forceUpdate()

        }
      }
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style scoped lang="scss">
.plugin-setting {
  width: 100%;

  .settings-header {
    user-select: none;
    position: relative;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 12px;
    color: #a1a6c4;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    .icon {
      max-width: 20px;
      max-height: 20px;
      img {
        margin-top: 7px;
        float: left;
        max-width: 20px;
        max-height: 20px;
      }
    }
    .title {
      color: #a1a6c4;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    &:hover {
      border: 1px #00a289 solid;
      border-radius: 4px;
    }
  }

  #format-feature {
    width: 100%;
    min-height: 50px;
    margin-top: 15px;
    .label {
      user-select: none;
      font-size: 12px;
      font-weight: 600;
      color: #a1a6c4;
      margin-bottom: 8px;
    }

    .options {
      width: 100%;
      min-height: 20px;

      .option {
        display: inline-block;
        width: 33%;
        margin-right: 10px;
        cursor: pointer;
        text-align: center;
        transition: all 150ms ease-in-out;
        user-select: none;

        .icon {
          position: relative;
          height: 57px;
          margin-bottom: 5px;
          background: #fff;
          border-radius: 5px;
          border: 1px solid transparent;
          box-sizing: border-box;
          background-repeat: no-repeat;
          background-size: 100% auto;
          background-position: center;
          overflow: hidden;
          transition: all 150ms ease-in-out;
          border: 1px solid transparent;
        }
        .name {
          font-size: 13px;
          color: #a1a6c4;
          text-align: center;
          opacity: 0.7;
          transition: all 150ms ease-in-out;
        }
      }

      .mormal-png {
        background-image: url("@/assets/icons/option-jpeg.svg") !important;
      }
      .active-png {
        background-image: url("@/assets/icons/option-jpeg-active.svg") !important;
        border: 1px solid #00a289 !important;
      }
      .mormal-jpeg {
        background-image: url("@/assets/icons/option-png.svg") !important;
      }
      .active-jpeg {
        background-image: url("@/assets/icons/option-png-active.svg") !important;
        border: 1px solid #00a289 !important;
      }
    }
  }

  #shortcuts-feature {
    margin-top: 10px;

    .label {
      user-select: none;
      font-size: 12px;
      font-weight: 600;
      color: #a1a6c4;
      margin-bottom: 8px;
    }

    .shortcuts-table {
      padding-right: 10px;
      .shortcut {
        display: flex;
        color: #a1a6c4;
        margin-bottom: 5px;

        .name {
          flex: 5;
          padding: 0px 4px;
          line-height: 26px;
          height: 26px;
          font-size: 12px;
        }
        .input {
          flex: 6;
          background-color: #fff;
          border-radius: 3px;

          input {
            width: 100%;
            border: none;
            line-height: 26px;
            height: 26px;
            padding: 0px 8px;
            font-size: 12px;
            background-color: transparent;
            box-sizing: border-box;
            color: #43474e;

            &:focus {
              outline: none;
              // box-shadow: 0 2px 0 #17baa1;
              border: 2px solid #00a289;
              border-radius: 4px;
            }
            &::selection {
              color: #fff;
              background-color: rgb(0, 110, 255);
            }
          }
        }
      }
    }
  }
}
</style>